<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>需求推送-投递意向</title>
		<link rel="icon shortcut" type="image/x-icon" href="img/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/common/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script type="text/javascript" src="js/viewport.js" ></script>
	</head>
	<body>
		<nav class="site-header">
			<ul class="clearfix">
				<li class="active"><a href="javascript:void(0)">投递意向</a></li>
				<li><a href="javascript:void(0)">上传案例</a></li>
				<li><a href="javascript:void(0)">投递成功</a></li>
			</ul>
		</nav>
		
		<section class="main">
			<!--倒计时 end-->
			<div class="main-header">
				<a class="header-btn active">需求详情</a>
				<a class="header-btn">产品标签</a>
			</div>
			<div class="main-content">
				<!--标识 ： 已下单：order-text ；   诚意金 : earnest-text -->
				<div class="content-top order-text clearfix">
					<div class="icon">已下单</div>
					<div class="text">需求方已托管首款的标识，可放心承接项目。</div>
				</div>
				<div class="content-top earnest-text clearfix">
					<div class="icon">诚意金</div>
					<div class="text">支付了诚意金的特别标识，证明需求方发布需求的真实可信。</div>
				</div>
				<!---->
				<!--需求详情 view start-->
				<div class="view-detail content-center">
					<div class="list-item">
						<p class="label">需求标题</p>
						<span class="text">设置便携风扇</span>
					</div>
					<div class="list-item">
						<p class="label">合作模式</p>
						<span class="text">项目制</span>
					</div>
					<div class="list-item">
						<p class="label">设计方案</p>
						<span class="text">外观设计、内部结构</span>
					</div>
					<div class="list-item">
						<p class="label">服务内容</p>
						<span class="text">全新设计</span>
					</div>
					<div class="list-item">
						<p class="label">产品品类</p>
						<span class="text">家电-生活小家电-小夜灯</span>
					</div>
					<div class="list-item">
						<p class="label">外观金额</p>
						<span class="text">待定，需报价</span>
					</div>
					<div class="list-item">
						<p class="label">结构金额</p>
						<span class="text">待定，需报价</span>
					</div>
					<div class="list-item">
						<p class="label">所在地区</p>
						<span class="text">广东省广州市</span>
					</div>
					<div class="list-item">
						<p class="label">产品信息</p>
						<span class="text">https://search.jd.com/Search?keyword=%E4%BE%F%E6%90%BA%E9%A3%8E</span>
					</div>
					<div class="list-item item-inform">
						<p class="label">产品资料</p>
						<div class="inform-right">
							<a class="downbtn btn">下载文件</a>
							<ul class="inform-list">
								<li class="clearfix">
									<span class="li-text">产品背景介绍.pdf</span>
									<a class="btn" href="">查看详情</a>
								</li>
								<li class="clearfix">
									<span class="li-text">产品背景介绍.pdf</span>
									<a class="btn" href="">查看详情</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="list-item">
						<p class="label">功能及重 点要求</p>
						<span class="text">要女性喜爱，有安全感</span>
					</div>
				</div>
				<!--需求详情 view end-->
				<!--产品标签 view start-->
				<div class="view-label content-center">
					<div class="list-item">
						<p class="label">产品定位</p>
						<span class="text">高端</span>
					</div>
					<div class="list-item">
						<p class="label">销售区域</p>
						<span class="text">国内</span>
					</div>
					<div class="list-item">
						<p class="label">主要材质</p>
						<span class="text">塑料</span>
					</div>
					<div class="list-item">
						<p class="label">控制方式</p>
						<span class="text">机械</span>
					</div>
					<div class="list-item">
						<p class="label">产品风格</p>
						<span class="text">日韩风格</span>
					</div>
					<div class="list-item">
						<p class="label">产品属性</p>
						<span class="text">色彩淡雅、智能</span>
					</div>
					<div class="list-item">
						<p class="label">适用人群</p>
						<span class="text">女性</span>
					</div>
					<!--暂无该产品标签 start-->
					<div class="view-nodata">
						<div class="icon"></div>
						<p>暂无该产品标签</p>
					</div>
				</div>
				<!--产品标签 view end-->
			</div>
		</section>
		
		<footer class="footer"><a class="footer-btn">可承接需求，投递意向</a></footer>
		
		<!--报价弹窗 start-->
		<div class="site-window site-price">
			<!--需求报价   只有一个需要报价时    加入 odd   class="content-form odd" -->
			<div class="win-content">
				<div class="content-title">报价</div>
				<div class="content-form">
					<form action="" method="post">
						<input class="inputtext" type="text" name="" id="" value="" placeholder="请输入外观设计报价"/>
						<input class="inputtext" type="text" name="" id="" value="" placeholder="请输入结构设计报价"/>
						<input class="reset" type="reset" value=""/>
					</form>
				</div>
				<div class="updata"><a class="btn">确认投递</a></div>
			</div>
		</div>
		<!--报价弹窗 end-->
		
		<!--现在提示弹窗 start-->
		<div class="site-window site-download">
			<div class="win-content">
				<div class="content-title">复制链接到浏览器打开，链接在十分钟内有效，请尽快下载！</div>
				<div class="download-url"><input id="downurl" type="text" value="www.laisj.com" readonly /></div>
				<button class="copybtn" data-clipboard-target="#downurl">复制链接</button>
			</div>
		</div>
		<!--现在提示弹窗 end-->
		
	</body>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="js/clipboard.min.js" ></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<script>
		
		//1.需求详情与产品标签   的切换
		var $header_btn = $('.header-btn'),
			$view_model = $('.content-center');
		$header_btn.click(function(){
			$header_btn.removeClass('active');
			$(this).addClass('active');
			$view_model.css('display','none');
			$view_model.eq($(this).index()).css('display','block');
		});
		
		
		//2.报价弹窗
		alertView();
		function alertView(){
			var $footer_btn = $('.footer-btn'),
				$site_window = $('.site-price'),
				$win_content = $('.site-price .win-content'),
				$site_btn = $('.site-price .updata .btn');     //确定投递btn
			
			inputFocus('.site-price');
			
			$footer_btn.click(function(){
				$site_window.fadeIn();
			});
			$win_content.click(function(e){
				e.stopPropagation();
			});
			$site_window.click(function(){
				$site_window.fadeOut();
				$('.site-price .reset').trigger('click');
			});
			
			
			$site_btn.click(function(){
				var $input = $('.site-price .inputtext');
				if($input.val() == ''){
					$input.css('border-color','#ee0003');
				}
			});
		}
		
		
		//3.下载提示
		downloadview();
		function downloadview(){
			var $down_btn = $('.downbtn'),
				$site_download = $('.site-download'),
				$site_content = $('.site-download .win-content'),
				$url = $('.site-download .download-url'),
				$site_btn = $('.site-download .copybtn');    
			
			
			$down_btn.click(function(){
				$site_download.fadeIn();
			});
//			$site_content.click(function(e){
//				e.stopPropagation();
//			});
			$site_download.click(function(){
				$site_download.fadeOut();
			});
			
		}
		
		var clipboard = new Clipboard('.copybtn');
		clipboard.on('success', function(e) {
		    e.clearSelection();
		});
		clipboard.on('error', function(e) {
		    console.error('Action:', e.action);
		});
		
		
	</script>
</html>
